import { Button } from 'antd';
import { useState } from 'react';
import { DragTable, EditIndexTable } from '.';

const Demo = (props) => {
  const {} = props;
  const [visible, setVisible] = useState(false);

  const tableColumnsProps = {
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        sorter: true,
        width: '20%',
      },
      {
        title: 'Sex',
        dataIndex: 'sex',
      },
      {
        title: 'Email',
        dataIndex: 'email',
      },
    ],
    ajaxFn: () =>
      Promise.resolve({
        total: 100,
        data: [
          { key: '1', name: '1 Anna Kristensen', sex: 'female', email: 'a.kristensen@example.com' },
          { key: '2', name: '2 bnna Kristensen', sex: 'female', email: 'b.kristensen@example.com' },
          { key: '3', name: '3 cnna Kristensen', sex: 'female', email: 'c.kristensen@example.com' },
          { key: '4', name: '4 Anna Kristensen', sex: 'female', email: 'a.kristensen@example.com' },
          { key: '5', name: '5 bnna Kristensen', sex: 'female', email: 'b.kristensen@example.com' },
          { key: '6', name: '6 cnna Kristensen', sex: 'female', email: 'c.kristensen@example.com' },
          { key: '7', name: '7 Anna Kristensen', sex: 'female', email: 'a.kristensen@example.com' },
          { key: '8', name: '8 bnna Kristensen', sex: 'female', email: 'b.kristensen@example.com' },
          { key: '9', name: '9 cnna Kristensen', sex: 'female', email: 'c.kristensen@example.com' },
          { key: '10', name: '10 Anna Kristensen', sex: 'female', email: 'a.kristensen@example.com' },
          { key: '11', name: '11 bnna Kristensen', sex: 'female', email: 'b.kristensen@example.com' },
          { key: '12', name: '12 cnna Kristensen', sex: 'female', email: 'c.kristensen@example.com' },
        ],
      }),
  };

  return (
    <>
      <h3>EditIndexTable</h3>
      <Button onClick={() => setVisible(true)}>摸一摸节瓜</Button>
      <EditIndexTable
        visible={visible}
        onVisibleChange={setVisible}
        defaultCheckedColumns={[{ key: 'name' }, { key: 'sex' }]}
        columnConfigs={[
          {
            idx: 1,
            field: 'base',
            childrenNode: [
              { field: 'name' },
              {
                field: 'testname',
                childrenNode: [{ key: 131, field: 'testname2' }],
              },
            ],
          },
          { idx: 2, field: 'sex' },
          { idx: 3, field: 'email' },
        ]}
        {...tableColumnsProps}
      />
      <h3>DragTable</h3>
      <DragTable rowKey="key" {...tableColumnsProps} />
    </>
  );
};
export default Demo;
